<template>
	<screen-page title="伟本智能仓储管理">
		<div class="home-screen-container hor-flex-containter">
			<div class="divider"></div>
			<div class="flex-block ver-flex-containter">
				<div class="special-blcok special-blcok-size-a">
					<screen-block title="实时库存总数">
						<module1 :data-source="data1" v-if="loaded1" />
					</screen-block>
				</div>
				<div class="ver-divider"></div>
				<div class="special-blcok special-blcok-size-a">
					<screen-block title="未完成单据数量">
						<module2 :data-source="data2" v-if="loaded1" />
					</screen-block>
				</div>
				<div class="ver-divider"></div>
				<div class="ver-flex-block">
					<screen-block title="订单状态">
						<module3 :data-source="data3" v-if="loaded2" />
					</screen-block>
				</div>
			</div>
			<div class="divider"></div>
			<div class="flex-block flex-block-grow2 ver-flex-containter">
				<div class="special-blcok">
					<screen-block>
						<module4 :data-source="data4" v-if="loaded1" />
					</screen-block>
				</div>
				<div class="ver-divider"></div>
				<div class="ver-flex-block">
					<screen-block title="近30天仓库流动统计图">
						<module5 ref="module5" :data-source="data5" v-if="loaded3 && loaded1" />
					</screen-block>
				</div>
				<div class="ver-divider"></div>
				<div class="ver-flex-block">
					<screen-block title="近30天单据数量统计图">
						<module6 ref="module6" :data-source="data6" v-if="loaded3 && loaded1" />
					</screen-block>
				</div>
			</div>
			<div class="divider"></div>
			<div class="flex-block ver-flex-containter">
				<div class="ver-flex-block">
					<screen-block title="今日出入库单数量">
						<module7 :data-source="data7" v-if="loaded4" />
					</screen-block>
				</div>
				<div class="ver-divider"></div>
				<div class="ver-flex-block">
					<screen-block title="仓库货位统计">
						<module8 ref="module8" :data-source="data8" v-if="loaded4" />
					</screen-block>
				</div>
				<div class="ver-divider"></div>
				<div class="ver-flex-block">
					<screen-block title="不良统计">
						<module9 ref="module9" :data-source="data9" v-if="loaded4" />
					</screen-block>
				</div>
			</div>
			<div class="divider"></div>
		</div>
	</screen-page>
</template>

<script setup>
import { ref, inject, getCurrentInstance, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import ScreenBlock from '@/components/ScreenBlock.vue'
import Module1 from './modules/HomeModule1.vue'
import Module2 from './modules/HomeModule2.vue'
import Module3 from './modules/HomeModule3.vue'
import Module4 from './modules/HomeModule4.vue'
import Module5 from './modules/HomeModule5.vue'
import Module6 from './modules/HomeModule6.vue'
import Module7 from './modules/HomeModule7.vue'
import Module8 from './modules/HomeModule8.vue'
import Module9 from './modules/HomeModule9.vue'
import {thousandsFormat} from '@/assets/js/utils'

const $config = inject('$config')
const $api = inject('$api')
const instance = getCurrentInstance()

let interval1 = null;
let interval2 = null;
let interval3 = null;
let interval4 = null;

const data1 = ref('0')
const data2 = ref({
	receiptDoc:0,
	outboundOrder:0,
	countSheet:0
})
const data3= ref([])
const data4 = ref([])
const data5 = ref([])
const data6 = ref([])
const data7 = ref({
	issueSum:0,
	issueImplement:0,
	warehousingSum:0,
	warehousingImplement:0,
	inventorySum:0,
	inventoryImplement:0
})
const data8 = ref([])
const data9 = ref([])

const loaded1 = ref(false)
const loaded2 = ref(false)
const loaded3 = ref(false)
const loaded4 = ref(false)

const getData = function(){
	getData1()
	getData2()
	getData3()
	getData4()
}

const getData1 = function(){
	loaded1.value = false
	$api.get('WarehouseOperation',{},{block:'home'}).then((d)=>{
		data1.value = thousandsFormat(d.stockNumbertion.stockSum || 0)
		data2.value = d.billNumbertion || {}
		data4.value = d.locationNumbertion || []
		loaded1.value = true
	}).catch(()=>{
		loaded1.value = true
	})
}

const getData2 = function(){
	loaded2.value = false
	$api.get('OrderStatusdt',{},{block:'home'}).then((d)=>{
		data3.value = d || []
		loaded2.value = true
	}).catch(()=>{
		loaded2.value = true
	})
}

const getData3 = function(){
	loaded3.value = false
	Promise.all([
		$api.get('WarehousingIssue',{},{block:'home'}),
		$api.get('DocumentsNumber',{},{block:'home'})
	]).then(response=>{
		data5.value = response[0] || []
		data6.value = response[1] || []
		loaded3.value = true
	}).catch(()=>{
		loaded3.value = true
	})
}

const refreshMiddileChart = function(){
	if (loaded1.value && loaded3.value) {
		nextTick(()=>{
			instance.refs.module5.drawChart()
			instance.refs.module6.drawChart()
		})
	}
}

const getData4 = function(){
	loaded4.value = false
	$api.get('Percentage',{},{block:'home'}).then((d)=>{
		data7.value = d.percentageBilltion || {}
		data8.value = d.locationNumbertion || []
		data9.value = d.qualityTestingtion || []
		loaded4.value = true
		nextTick(()=>{
			instance.refs.module8.drawChart()
			instance.refs.module9.drawChart()
		})
	}).catch(()=>{
		loaded4.value = true
	})
}

watch(loaded1,()=>{
	refreshMiddileChart()
})

watch(loaded3,()=>{
	refreshMiddileChart()
})

const destoryIntervel1 = function(){
	try{
		window.clearInterval(interval1)
		interval1 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel2 = function(){
	try{
		window.clearInterval(interval2)
		interval2 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel3 = function(){
	try{
		window.clearInterval(interval3)
		interval3 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel4 = function(){
	try{
		window.clearInterval(interval4)
		interval4 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel = function(){
	destoryIntervel1()
	destoryIntervel2()
	destoryIntervel3()
	destoryIntervel4()
}

const createInterval = function(){
	interval1 = window.setInterval(getData1,$config.base.screen.home.intervalTime1)
	interval2 = window.setInterval(getData2,$config.base.screen.home.intervalTime2)
	interval3 = window.setInterval(getData3,$config.base.screen.home.intervalTime3)
	interval4 = window.setInterval(getData4,$config.base.screen.home.intervalTime4)
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
})
</script>

<style lang="scss" scoped>
.home-screen-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	.divider{
		width: .14em;
		flex-shrink: 0;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
	.flex-block-grow2{
		flex-grow: 2;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
	.ver-divider{
		height: .14em;
		flex-shrink: 0;
	}
	.special-blcok{
		flex-shrink: 0;
	}
	.special-blcok-size-a{
		height: 1.8em;
	}
}
</style>